<template>
	<gui-page>
		<template v-slot:gBody>
			<gui-a-header title="企业信息"></gui-a-header>
			<view class="company-list">
				<view class="company-item flex-ac-jb bgfff radius">
					<view class="company-headImg">
						<gui-image :src="company.logo" :width="122" :height="122" borderRadius="14rpx"
							mode="aspectFill"></gui-image>
					</view>
					<view class="company-info flex1 flex-dc">
						<text class="gui-bold">{{company.companyName}}</text>
						<text class="c666 f22">在招岗位：{{company.zzNum}}个</text>
						<view class="flex-ac-row f18">
							<view class="post-label c999" v-for="(item,index) in company.welfareTreatmentArr"
								:key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="block" v-if="!isHideTabbar">
						<view class="saveBtn" v-if="company.shCollectNum == 0" @click="conpanyCollect(0)">
							<text>已收藏</text>
							<image class="icon" src="../../static/mine/collect.png" mode="widthFix"
								style="height: auto;">
							</image>
						</view>
						<view class="saveBtn" v-if="company.shCollectNum == 1" @click="conpanyCollect(1)"
							style="background: #e9f0fe;color: #4072FE;">
							<text>收藏公司</text>
							<image class="icon" src="../../static/mine/collect_no.png" mode="widthFix"
								style="height: auto;">
							</image>
						</view>
					</view>

					<view class="saveBtn" v-else-if="isHideTabbar" @tap="$u.to(`/pages/firm/company-form`)">
						<text>编辑信息</text>
					</view>
				</view>
			</view>
			<view class="bgfff" style="padding-bottom: 60rpx;">
				<view class="info-con">
					<view class="flex-ac-jb">
						<view class="title-img flex-ac">
							<image src="../../static/mine/zhiweijiashao.png" mode="widthFix" style="height: auto;">
							</image>
							<text class="f26 gui-bold">公司信息</text>
						</view>
					</view>
					<view class="company-info">
						<view class="company-text flex-dc f24">
							<!-- <text>注册资金：{{company.registerMoney || '待完善'}}</text> -->
							<!-- <text>成立时间：{{company.creTime || '待完善'}}</text>
							<text>法人代表：{{company.person || '待完善'}}</text> -->
							<text>注册地址：{{company.registerAddress}}</text>
							<view class="flex-ac" @click="callPhone">联系人：{{company.contacts}}
								<image src="../../static/mine/phone.png" mode="widthFix" style="height: auto;"></image>
							</view>
						</view>
					</view>
					<view class="title-img flex-ac">
						<image src="../../static/mine/zhiweiyaoqiu.png" mode="widthFix" style="height: auto;"></image>
						<text class="f26 gui-bold">公司介绍</text>
					</view>
					<view class="desc-con flex-dc f24">
						<text>{{company.companyContext || '待完善'}}</text>
					</view>
					<view class="title-img flex-ac">
						<image src="../../static/mine/fulidaiyu.png" mode="widthFix" style="height: auto;"></image>
						<text class="f26 gui-bold">福利待遇</text>
					</view>
					<view class="desc-con flex-dc f24">
						<text v-for="(item,index) in company.welfareTreatmentArr" :key="index">{{index+1}}.
							{{item}}；</text>
						<view v-if="!company.welfareTreatmentArr">
							待完善
						</view>
					</view>
					<view class="title-img flex-ac">
						<image src="../../static/mine/huanjing.png" mode="widthFix" style="height: auto;width: 18rpx;">
						</image>
						<text class="f26 gui-bold">公司环境</text>
					</view>
					<view class="scroll-x">
						<view v-if="!company.companyImageArr">
							待完善
						</view>
						<scroll-view class="gui-scroll-x" :show-scrollbar="false" :scroll-x="true"
							style="width:690rpx;">
							<view class="gui-scroll-x-items gui-img-in" v-if="company.companyVedio">
								<view class="gui-scroll-image" @tap="playVideo">
									<gui-image :width="287" :height="161" borderRadius="14rpx"
										mode="aspectFill"></gui-image>
									<view class="play-video flex-ac-jc radius">
										<image src="../../static/mine/icon_play.png" mode="widthFix"
											style="height: auto;">
										</image>
									</view>
								</view>
							</view>
							<view class="gui-scroll-x-items gui-img-in" v-for="(item,index) in company.companyImageArr"
								:key="index">
								<view class="gui-scroll-image" @tap="showImage(index)">
									<gui-image :src="item" :width="287" :height="161" borderRadius="14rpx"
										mode="aspectFill"></gui-image>
									<view class="play-video flex-ac-jc radius" @tap="playVideo" v-if="false">
										<image src="../../static/mine/icon_play.png" mode="widthFix"
											style="height: auto;">
										</image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="title-img flex-ac">
						<image src="../../static/index/location.png" mode="widthFix" style="height: auto;width: 18rpx;">
						</image>
						<text class="f26 gui-bold">工作地址</text>
					</view>
					<view class="address">
						<view class="address-name flex-ac-jb f24 c666" @click="showLocation">
							<text>{{company.workAddress}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
						<view class="map">
							<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
								:markers="covers"></map>
						</view>
					</view>
					<view class="title-img flex-ac">
						<image src="../../static/index/location.png" mode="widthFix" style="height: auto;width: 18rpx;">
						</image>
						<text class="f26 gui-bold">在招职位</text>
					</view>
					<view class="post-list">
						<gui-empty v-if="postList.length <= 0">
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
										mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
							</template>
						</gui-empty>
						<view class="item radius" v-for="(item,index) in postList" :key="item.id"
							@tap="$u.to(`/pages/post/postDetail?id=${item.id}`)">
							<view class="flex-ac-jb">
								<text class="title">{{item.postName}}</text>
								<text class="pay f24 colorRed">{{item.postMoney}}</text>
							</view>
							<view class="info flex-ac f22">
								<text>{{item.workArea}} {{item.work}} {{item.education}} 招{{item.recruitNum}}人</text>
							</view>
							<view class="flex-ac-row f18">
								<view class="post-label c999" v-for="(wItem,wIndex) in item.welfareContext.split(',')"
									:key="index">{{wItem}}</view>
							</view>
							<!-- <view class="company flex-ac-jb">
								<view class="left flex-ac">
									<image class="qiye-icon" src="../../static/index/qiye.png" mode="widthFix"
										style="height: auto;"></image>
									<text class="c666 f24">徐州澜海科技有限公司</text>
								</view>
								<text class="c999 f20">信息来源：徐州市本级</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="secure-tip flex-dc radius">
					<text class="colorBlue f26 gui-bold">安全提示：</text>
					<!-- <text
						class="z-index1 f22">本平台严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股等，您一旦发现此类行为，请立即联系徐州市人力资源市场:
						<text class="colorRed gui-bold">0516-85805892</text> 举报</text> -->
					<rich-text :nodes="cautionTxt"></rich-text>
					<image class="icon" src="../../static/image/anquan.png" mode="widthFix" style="height: auto;">
					</image>
				</view>
			</view>
			<!-- 居中弹出 -->
			<gui-popup ref="guipopup1">
				<view class="gui-relative gui-box-shadow gui-img-in">
					<video id="myVideo" class="gui-course-video" :src="company.companyVedio"
						poster="https://images.unsplash.com/photo-1662581872342-3f8e0145668f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
						controls></video>
					<!-- 关闭按钮 -->
					<text class="gui-block demo-close gui-icons gui-color-white gui-absolute-rt"
						@tap.stop="close1">&#xe78a;</text>
				</view>
			</gui-popup>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	import {
		selectUsertConpanyInfo,
		selectPromptListNewBack,
		selectPromptByTwo
	} from '@/api/company.js';
	import {
		selectUsertConpanyInfoGetOne,
		usertConpanyCollect
	} from '@/api/user.js'

	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	const store = useUserStore()
	const {
		isHideTabbar
	} = storeToRefs(store)

	const $u = reactive(inject('$u'))
	const longitude = ref(116.39742) //经度
	const latitude = ref(39.909) //纬度
	const videoContext = ref(uni.createVideoContext('myVideo')) //创建video实例
	const videoUrl = ref(
		'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
	) //视频地址
	const firmId = ref('');

	onLoad((option) => {
		if (isHideTabbar.value) {
			loadData();
		} else if (option.id) {
			firmId.value = option.id
			loadUserData();
		}
		uni.$on('updateCompany', () => {
			if (isHideTabbar.value) {
				loadData();
			}
		})
	})
	onUnload(() => {
		uni.$off('updateCompany')
	})

	const covers = ref([{
		id: 1,
		latitude: 39.909,
		longitude: 116.39742,
		width: 16,
		height: 25,
		iconPath: '/static/index/location.png'
	}])
	const guipopup1 = ref(null)
	const playVideo = (url) => {
		guipopup1.value.open()
		videoContext.value.play()
	}
	const company = ref({});
	const postList = ref([])
	const cautionTxt = ref('')
	const loadUserData = () => {
		selectUsertConpanyInfoGetOne({
			id: firmId.value
		}).then(res => {
			if (res.code == 200) {
				let result = res.data;
				if (result.companyImage) {
					result.companyImageArr = result.companyImage.split(',')
				}
				if (result.welfareTreatment) {
					result.welfareTreatmentArr = result.welfareTreatment.split(',')
				}
				company.value = result;
				latitude.value = Number(result.lat)
				longitude.value = Number(result.lon)
				covers.value = [{
					id: 1,
					latitude: Number(result.lat),
					longitude: Number(result.lon),
					width: 16,
					height: 25,
					iconPath: '/static/index/location.png'
				}]
				console.log(covers.value);
				showPostInfoList(result.refUserId);
			}
		})
	}
	// 收藏公司
	const conpanyCollect = (isSc) => {
		usertConpanyCollect({
			id: firmId.value
		}).then(res => {
			if (res.code == 200) {
				if (isSc == 0) {
					company.value.shCollectNum = 1;
					$u.msg('已取消');
				} else {
					company.value.shCollectNum = 0;
					$u.msg('已收藏');
				}
			}
		})
	}
	const loadData = () => {
		selectUsertConpanyInfo().then(res => {
			if (res.code == 200) {
				let result = res.data;
				if (result.companyImage) {
					result.companyImageArr = result.companyImage.split(',')
				}
				if (result.welfareTreatment) {
					result.welfareTreatmentArr = result.welfareTreatment.split(',')
				}
				company.value = result;
				latitude.value = Number(result.lat)
				longitude.value = Number(result.lon)
				covers.value = [{ 
					id: 1,
					latitude: Number(result.lat),
					longitude: Number(result.lon),
					width: 16,
					height: 25,
					iconPath: '/static/index/location.png'
				}]
				console.log(covers.value);
				showPostInfoList(result.refUserId);
			}
		})
	}
	const showPostInfoList = (refUserId) => {
		selectPromptListNewBack({
			pageNum: 1,
			pageSize: 999,
			refUserId
		}).then(res => {
			if (res.code == 200) {
				postList.value = res.rows;
			}
		})
		selectPromptByTwo().then(res => {
			if (res.code == 200) {
				cautionTxt.value = res.data.context;
			}
		})
	}
	const showImage = (current) => {
		uni.previewImage({
			current,
			urls: company.value.companyImageArr
		});
	}

	const showLocation = () => {
		uni.openLocation({
			latitude: Number(company.value.lat),
			longitude: Number(company.value.lon),
			name: company.value.workAddress,
			success: function() {
				console.log('success');
			}
		});
	}
	
	const callPhone = () => {
		if(company.value.phone) {
			$u.makePhone(company.value.phone.toString());
		}
	}
</script>

<style lang="scss">
	.company-list {
		margin-bottom: 20rpx;

		.saveBtn {
			width: 130rpx;
			height: 43rpx;
			border-radius: 14rpx;
			background: rgba(64, 114, 254, 1);
			font-size: 20rpx;

			.icon {
				width: 20rpx;
				margin-left: 10rpx;
			}
		}
	}

	.info-con {
		padding: 40rpx 38rpx;

		.desc-con {
			line-height: 40rpx;
			margin-top: 26rpx;
			margin-bottom: 54rpx;
		}


		.company-info {
			// padding-left: 38rpx;
			margin-top: 30rpx;
			margin-bottom: 46rpx;
			margin-left: 0;
			margin-right: 0;

			.logo-info {
				line-height: 36rpx;
			}

			.comLogo {
				width: 82rpx;
				height: 82rpx;
				margin-right: 16rpx;
			}

			.company-text {
				line-height: 40rpx;
				margin-top: 20rpx;

				image {
					width: 20rpx;
					margin-left: 15rpx;
				}
			}
		}

		.address {
			.address-name {
				padding-left: 38rpx;
				margin: 20rpx 0 25rpx 0;
			}
		}

		.map {
			width: 674rpx;
			height: 362rpx;
			padding-bottom: 60rpx;
		}

		.post-list {
			.item {
				background: #F8F8F8;
				padding: 36rpx 24rpx;
				margin-top: 20rpx;
			}
		}

		.scroll-x {
			margin-top: 20rpx;
			margin-bottom: 60rpx;

			.gui-scroll-x-items {
				margin-right: 10rpx;

				&:last-child {
					margin-right: 0;
				}

				.gui-scroll-image {
					position: relative;
					width: 287rpx;
					height: 161rpx;

					.play-video {
						position: absolute;
						inset: 0;
						background: rgba(0, 0, 0, .5);

						image {
							width: 80rpx;
						}
					}
				}
			}
		}
	}

	.secure-tip {
		position: relative;
		background: #fcfcfc;
		padding: 37rpx 87rpx 42rpx 77rpx;
		line-height: 40rpx;

		.icon {
			position: absolute;
			right: 65rpx;
			top: 29rpx;
			width: 70rpx;
			opacity: .5;
		}
	}
</style>